import { useQuery } from '@tanstack/react-query';
import cn from 'classnames';
import { FC } from 'react';
import { Link } from 'react-router-dom';

import { useDismiss } from '../../../hooks/useDismiss.ts';
import { AdminService } from '../../../services/admin.service.ts';
import Page from '../../layout/Page';

import { EmployeeListPageProps } from './EmployeeListPage.props';

const EmployeeListPage: FC<EmployeeListPageProps> = ({}) => {
  const { data, isLoading } = useQuery({
    queryKey: ['admin', 'list', 'employees'],
    queryFn: () => AdminService.getList(),
  });

  const dismiss = useDismiss();

  return (
    <Page>
      {isLoading && !data ? (
        'Загрузка...'
      ) : (
        <>
          <section className={cn('mb-[1rem]')}>
            <Link
              to={'/admin/new'}
              className={cn('p-[.5rem] bg-blue-300 rounded-md')}
            >
              ➕ Создать нового сотрудника
            </Link>
          </section>

          <section
            className={cn('grid gap-[.5rem]')}
            style={{
              gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
            }}
          >
            {data?.data?.map(({ id, name, group, status }, index) => (
              <div
                key={`${index}: for user ${id}`}
                className={cn('p-[.75rem] rounded-md bg-neutral-200')}
              >
                <header>
                  <h2 className={cn('font-bold text-[1.1em]')}>{name}</h2>

                  <div className={cn('mb-[.25rem]')}>
                    <p>Роль: {group}</p>
                    <p>Текущий статус: {status}</p>
                  </div>
                </header>

                <div
                  className={cn(
                    'grid items-start gap-[.25rem] text-[.7em]',
                    '[&>button]:px-[.5em] [&>button]:py-[.25em]',
                    '[&>button]:rounded-md',
                  )}
                  style={{
                    gridTemplateColumns: 'repeat(auto-fit, minmax(75px, 1fr))',
                  }}
                >
                  <Link
                    to={`/admin/view/${id}`}
                    className={'size-full'}
                  >
                    <button
                      className={cn(
                        'bg-blue-600 text-white size-full rounded-md',
                      )}
                    >
                      Посмотреть
                    </button>
                  </Link>

                  <button
                    className={cn(
                      'bg-red-600 text-white disabled:opacity-50 disabled:cursor-not-allowed',
                    )}
                    onClick={() => dismiss(id)}
                    disabled={group === 'Администратор'}
                  >
                    Уволить
                  </button>
                </div>
              </div>
            ))}
          </section>
        </>
      )}
    </Page>
  );
};

export default EmployeeListPage;
